<template>
    <div id="box">
        <van-tabs v-model="active" scrollspy sticky>
            <van-tab v-for="index in 3" :title="artical[index-1]" :key="index">
            <div v-if="index==1"><div class="detail">
                <img :src="detail.imgd" alt="">
                </div>
            </div>
            <div v-if="index==2">
                <div class="shop">
                    <h2>购票须知</h2>
                    <h3>限购规则</h3>
                    <p>{{detail.shop1}}</p>
                    <h3>退票/换票规则</h3>
                    <p>{{detail.shop2}}</p>
                    <h3>入场规则</h3>
                    <p>{{detail.shop3}}</p>
                </div>
            </div>
            <div v-if="index==3">
                <div class="shop" style="border-bottom: 0.1rem solid #f6f7f9">
                    <h2>观演须知</h2>
                    <h3>演出时长</h3>
                    <p>{{detail.watch3}}</p>
                    <h3>入场时间</h3>
                    <p>{{detail.watch3}}</p>
                    <h3>禁止携带物品</h3>
                    <p>{{detail.watch3}}</p>
                </div>
            </div>
        </van-tab>
</van-tabs>
    </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Particulars",
  data() {
    return {
      artical:["详情","购票须知","观演须知"],
      active: 0,
      detail:[],
      num:""
    };
  },
   created() {
       this.num=this.$route.params.id ||this.$route.query.num;
        axios({
        url: "/goods",
        method: "get",
        params:{
            id:this.num
        }
        })
        .then(res => {
            this.detail=res.data[0];
        });
    },
};
</script>

<style scoped>
.detail {
  width: 3.32rem;
  margin: 0 auto;
  margin-top: 0.1rem;
  border-bottom: 0.1rem solid #f6f7f9
}
.detail img {
  width: 100%;
  height: 100%;
}
.shop{
    width:3.32rem;
    margin: 0 auto;
    border-bottom: 0.01rem solid #ededed;
    margin-bottom: 0.05rem;
}
.shop h2{
    font-size: 0.16rem;
    margin-top: 0.21rem;
}
.shop h3{
    font-size: 0.1rem;
    line-height: 0.23rem;
    margin-top: 0.05rem
}
.shop p{
    font-size: 0.13rem;
    color: #9c9ba3;
    line-height: 0.27rem;
}
</style>
